<template>
  <div class="permission">
    <div class="desc">
      <div>
        <ep-title title="不可移动文物"></ep-title>
        <ep-count text="数据量" :count="8512" unit="条"></ep-count>
        <ep-time
          style="padding-left: 15px"
          text="当前任务截止时间："
          timer="2023-02-24 23:59"
        ></ep-time>
      </div>
      <div>
        <ep-proofread text="已校核：" :count="5313" unit="条"></ep-proofread>
        <ep-proofread
          style="padding-left: 15px"
          text="未校核："
          :count="3200"
          unit="条"
        ></ep-proofread>
        <ep-progress
          style="padding-left: 15px"
          width="150px"
          size="small"
          :percent="50"
        />
        <ep-button style="margin-left: 15px" size="small" type="rank"
          >校核排行</ep-button
        >
      </div>
    </div>
    <div class="condition">
      <div>
        <div style="flex: 0 0 auto">
          <ep-search
            v-model="keyWords"
            placeholder="输入点位名称搜索"
            enter-button="搜索"
            @search="onSearch"
          ></ep-search>
        </div>
        <ep-button
          style="margin-left: 15px"
          icon="refresh.svg"
          @click="refresh"
        ></ep-button>
        <div class="field">
          <ep-button icon="field.svg" @click="fieldVisible = !fieldVisible"
            >字段展示</ep-button
          >
          <div class="field-box" v-if="fieldVisible">
            <ul>
              <li v-for="(column, index) in columns" :key="index">
                <vxe-checkbox v-model="column.visible" :key="index">{{
                  column.title
                }}</vxe-checkbox>
              </li>
            </ul>
            <div class="btn">
              <p @click="fieldConfirm">确认</p>
              <p @click="fieldRevert">还原</p>
            </div>
          </div>
        </div>
      </div>
      <div>
        <ep-button style="margin-left: 15px" icon="add.svg" @click="add"
          >新增</ep-button
        >
        <ep-button
          style="margin-left: 15px"
          icon="export.svg"
          @click="exportFile"
          >导出</ep-button
        >
        <ep-button
          style="margin-left: 15px"
          type="danger"
          icon="del.svg"
          @click="batchDel"
          >批量删除</ep-button
        >
      </div>
    </div>
    <div class="ep-table">
      <vxe-table
        border="none"
        stripe
        ref="xTable"
        align="center"
        :max-height="tableHeight"
        :data="tableData"
        @checkbox-all="selectAllEvent"
        @checkbox-change="selectChangeEvent"
      >
        <vxe-column type="checkbox" width="60"></vxe-column>
        <vxe-column type="seq" title="序号" width="60"></vxe-column>
        <vxe-column field="name" title="名称"></vxe-column>
        <vxe-column field="role" title="类别"></vxe-column>
        <vxe-column field="sex" title="文保等级" sortable></vxe-column>
        <vxe-column field="age" title="时代" sortable></vxe-column>
        <vxe-column field="address" title="县市区"></vxe-column>
        <vxe-column field="sa" title="街道"></vxe-column>
        <vxe-column field="sb" title="最新修改人"></vxe-column>
        <vxe-column title="审核状态">
          <template slot-scope="scope">
            <template v-if="scope.row.sc !== '0'">
              <span :class="'examine-' + scope.row.sc">{{
                scope.row.sc | examine
              }}</span>
            </template>
            <template v-else>
              <a-tooltip placement="top" overlayClassName="r-reason">
                <template #title>
                  <span>点击查看理由</span>
                </template>
                <span
                  :class="'examine-' + scope.row.sc"
                  @click="checkReason(scope.row)"
                  >{{ scope.row.sc | examine }}</span
                >
              </a-tooltip>
            </template>
          </template>
        </vxe-column>
        <vxe-column field="sd" title="是否核销"></vxe-column>
        <vxe-column field="se" title="是否安全"></vxe-column>
        <vxe-column field="sf" title="监控设备"></vxe-column>
        <vxe-column title="操作">
          <template slot-scope="scope">
            <ep-button size="small" type="rank" @click="operate(scope.row)">{{
              scope.row.sc | operation
            }}</ep-button>
          </template>
        </vxe-column>
      </vxe-table>
      <div v-if="pageInfo.total && pageInfo.total > 10">
        <vxe-pager
          :current-page="pageInfo.currentPage"
          :page-size="pageInfo.pageSize"
          :total="pageInfo.total"
          :layouts="['Total', 'PrevPage', 'JumpNumber', 'NextPage', 'FullJump']"
          @page-change="handlePageChange"
        >
        </vxe-pager>
      </div>
    </div>
    <reason-dialog
      v-if="reasonVisible"
      title="驳回理由"
      :reason="reasonText"
      @close="reasonVisible = false"
    />
    <form-dialog
      v-if="formVisible"
      :title="formTitle"
      :form="form"
      @close="formVisible = false"
    />
  </div>
</template>

<script>
import reasonDialog from "./components/reasonDialog.vue";
import formDialog from "./components/formDialog.vue";
export default {
  name: "permission",
  components: { reasonDialog, formDialog },
  data() {
    return {
      keyWords: "",
      fieldVisible: false,
      columns: [],
      tableData: [],
      tableHeight: 0,
      checkRecords: [],
      pageInfo: {
        total: 14,
        currentPage: 1,
        pageSize: 10,
      },
      reasonVisible: false,
      reasonText: "",
      formVisible: true,
      formTitle: '新增点位',
      form: {}
    };
  },
  mounted() {
    this.getTableData();
    this.$nextTick(() => {
      this.columns = this.$refs.xTable.getColumns();
      // this.columns.splice(0, 1);
    });
    this.$nextTick(() => {
      this.getTableHeight();
    });
    window.addEventListener("resize", this.getTableHeight);
  },
  filters: {
    examine(val) {
      let obj = {
        0: "驳回",
        1: "通过",
        2: "审核中",
      };
      return obj[val] || "";
    },
    operation(val) {
      let obj = {
        0: "校核",
        1: "查看",
        2: "编辑",
      };
      return obj[val] || "查看";
    },
  },
  methods: {
    // 搜索
    onSearch() {},
    // 刷新
    refresh() {},
    // 字段展示- 筛选确认
    fieldConfirm() {
      this.fieldVisible = false;
      this.$refs.xTable.refreshColumn();
    },
    // 字段展示-还原
    fieldRevert() {
      this.fieldVisible = false;
      this.columns.forEach((el) => {
        el.visible = true;
      });
      this.$refs.xTable.refreshColumn();
    },
    // 新增
    add() {},
    // 导出
    exportFile() {},
    // 批量删除
    batchDel() {
      if (!this.checkRecords.length) {
        this.$message.warning("请选择删除的点位名称");
      }
    },
    getTableData() {
      this.tableData = [
        {
          id: 10001,
          name: "Test1",
          role: "Develop",
          sex: "Man",
          age: 28,
          address: "test abc",
          sa: "sa",
          sb: "sb",
          sc: "1",
          sd: "sd",
          se: "se",
          sf: "sf",
        },
        {
          id: 10002,
          name: "Test2",
          role: "Test",
          sex: "Women",
          age: 22,
          address: "Guangzhou",
          sa: "sa",
          sb: "sb",
          sc: "0",
          sd: "sd",
          se: "se",
          sf: "sf",
        },
        {
          id: 10003,
          name: "Test3",
          role: "PM",
          sex: "Man",
          age: 32,
          address: "Shanghai",
          sa: "sa",
          sb: "sb",
          sc: "2",
          sd: "sd",
          se: "se",
          sf: "sf",
        },
        {
          id: 10004,
          name: "Test4",
          role: "Designer",
          sex: "Women",
          age: 23,
          address: "test abc",
          sa: "sa",
          sb: "sb",
          sc: "1",
          sd: "sd",
          se: "se",
          sf: "sf",
        },
        {
          id: 10005,
          name: "Test5",
          role: "Develop",
          sex: "Women",
          age: 30,
          address: "Shanghai",
          sa: "sa",
          sb: "sb",
          sc: "1",
          sd: "sd",
          se: "se",
          sf: "sf",
        },
        {
          id: 10006,
          name: "Test6",
          role: "Designer",
          sex: "Women",
          age: 21,
          address: "test abc",
          sa: "sa",
          sb: "sb",
          sc: "1",
          sd: "sd",
          se: "se",
          sf: "sf",
        },
        {
          id: 10007,
          name: "Test7",
          role: "Test",
          sex: "Man",
          age: 29,
          address: "test abc",
          sa: "sa",
          sb: "sb",
          sc: "1",
          sd: "sd",
          se: "se",
          sf: "sf",
        },
        {
          id: 10008,
          name: "Test8",
          role: "Develop",
          sex: "Man",
          age: 35,
          address: "test abc",
          sa: "sa",
          sb: "sb",
          sc: "1",
          sd: "sd",
          se: "se",
          sf: "sf",
        },
        {
          id: 10008,
          name: "Test8",
          role: "Develop",
          sex: "Man",
          age: 35,
          address: "test abc",
          sa: "sa",
          sb: "sb",
          sc: "1",
          sd: "sd",
          se: "se",
          sf: "sf",
        },
        {
          id: 10009,
          name: "Test8",
          role: "Develop",
          sex: "Man",
          age: 35,
          address: "test abc",
          sa: "sa",
          sb: "sb",
          sc: "1",
          sd: "sd",
          se: "se",
          sf: "sf",
        },
      ];
    },
    // 选择框
    selectChangeEvent() {
      this.checkRecords = this.$refs.xTable.getCheckboxRecords();
    },
    // 选择框-all
    selectAllEvent() {
      this.checkRecords = this.$refs.xTable.getCheckboxRecords();
    },
    // 驳回理由
    checkReason(row) {
      this.reasonText = row.reason || "不符合要求";
      this.reasonVisible = true;
    },
    // 操作
    operate(row) {},
    // 分页
    handlePageChange({ currentPage, pageSize }) {
      this.pageInfo.currentPage = currentPage;
      this.pageInfo.pageSize = pageSize;
    },
    // 表格高度
    getTableHeight() {
      this.$nextTick(() => {
        this.tableHeight = window.innerHeight - 371;
      });
    },
  },
  beforeRouteLeave(to, from, next) {
    window.removeEventListener("resize", this.getTableHeight);
    next();
  },
};
</script>
<style lang="less" scoped>
.permission {
  padding: 15px 20px 0;
  .desc,
  .condition {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;
    > div {
      flex: 0 0 auto;
      display: flex;
      align-items: center;
    }
    .field {
      flex: 0 0 atuo;
      position: relative;
      margin-left: 15px;
      .field-box {
        position: absolute;
        top: 40px;
        left: 0;
        right: -40px;
        z-index: 99;
        border: 1px solid #2175a9;
        background: #002a44;
        border-radius: 5px;
        ul {
          padding: 10px;
          li {
            padding: 1px 0;
          }
        }
        .btn {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 5px;
          border-top: 1px solid #2175a9;
          color: #fff;
          p {
            flex: 1;
            text-align: center;
            cursor: pointer;
            &:hover {
              color: #49bbeb;
            }
          }
        }
      }
    }
  }
  .desc {
    margin-bottom: 20px;
  }
  .condition {
    margin-bottom: 15px;
  }
  .ep-table {
    .examine-0 {
      color: #fe5756;
      cursor: pointer;
    }
    .examine-1 {
      color: #28ffad;
    }
    .examine-2 {
      color: #ffbd29;
    }
  }
  ::v-deep .vxe-checkbox--label {
    padding-left: 12px;
    color: #fff;
  }
  ::v-deep .vxe-checkbox--icon {
    box-shadow: none !important;
  }
}
</style>
<style lang="less">
.r-reason {
  .ant-tooltip-arrow::before {
    background: #2175a9;
  }
  .ant-tooltip-inner {
    border: 1px solid #2175a9;
    background: #002a44;
    color: #49bbeb;
  }
}
</style>

